<template>
  <div class="pageAll" ref="userPage" :style="PageStyle">
    <Tabs type="card">
      <TabPane label="操作日志" name=""></TabPane>
    </Tabs>

    <div class="content">
        <br />
      <Row>
          <Col span="6">关键字：<Input v-model="searchParams.key" placeholder="请输入关键字" clearable style="width: 60%"/>
          </Col>
          <Col span="6">开始时间：
          <DatePicker v-model="searchParams.startTime" type="datetime" format="yyyy-MM-dd HH:mm:ss"  placeholder="请选择开始时间" style="width: 200px"></DatePicker>
          </Col>
          <Col span="6">结束时间：
          <DatePicker v-model="searchParams.endTime" type="datetime" format="yyyy-MM-dd HH:mm:ss"  placeholder="请选择结束时间" style="width: 200px"></DatePicker>
          </Col>
          <Col span="6">
            <Button type="primary" icon="ios-search" @click="getData()">搜索</Button>
          </Col>
      </Row>
      <div class="tableComponents">
       <TableHelper ref="tableHelper" :action="actions.getOperationlogs" :params="searchParams"
                     :columns="operationColumns"></TableHelper>
      </div>
    </div>
  </div>
</template>
<script>
  import TableHelper from "../../../components/table/TableHelper"
  import {requestPost} from "../../../utils/js/HttpUtil"
  import messageUtil from "../../../utils/js/MessageUtil"
  import {formatDate} from "../../../utils/js/DateUtil.js"

  export default {
    components: {
      TableHelper
    },
    data() {
      return {
        PageStyle: {
          height: ""
        },
        drawerValue: false,
        searchParams: {
          key: "",
          startTime:"",
          endTime:""
        },
        actions: {
          getOperationlogs:"/system/log/getOperationlogs"
        },
        operationColumns: [
            {
              title: '用户账号',
              render: (h, params) => {
                      return h('span',params.row.userAccount);
              }
            },
            {
              title: '用户姓名',
              render: (h, params) => {
                      return h('span',params.row.userName);
              }
            },
            {
              title: '操作时间',
              render: (h, params) => {
                return h('span', params.row.date);
              }
            },
            {
              title: '请求ip',
              render: (h, params) => {
                return h('span', params.row.requestIp);
              }
            },
            {
              title: '操作模块',
              render: (h, params) => {
                return h('span', params.row.module);
              }
            },
            {
              title: '操作类型',
              render: (h, params) => {
                return h('span', params.row.type);
              }
            },
            {
              title: '请求方法',
              width:'350px',
              render: (h, params) => {
                return h('span', params.row.requestMethod);
              }
            },
            {
              title: '操作内容',
              render: (h, params) => {
                return h('span', params.row.content);
              }
            },
        ]
      }
    },
    methods: {
      getHeight() {
        this.PageStyle.height = window.innerHeight - 3.75 * 12 + 'px';
      },
      getData() {
          this.search()
          this.$refs.tableHelper.getData()
      },
      search(){
       if(this.searchParams.startTime==""){
         this.searchParams.startTime=""
         }else{
          this.searchParams.startTime=formatDate(this.searchParams.startTime)
       }
       if(this.searchParams.endTime==""){
         this.searchParams.endTime=""
         }else{
          this.searchParams.endTime=formatDate(this.searchParams.endTime)
       }
      }
    },
    created() {
      this.getHeight()

    },
    mounted() {
      window.addEventListener('resize', this.getHeight);
      this.getHeight()
    }
  }
</script>
<style scoped="scoped">
  .pageAll {
    overflow: auto;
  }

  .content {
    padding-left: 2%;
    padding-right: 2%;
  }

</style>
